<template>
  <div class="HeightAuto llt-menu-box">
    <loginBox :isCollapse="isCollapse" />
    <!-- <div class="menu-logo-hidden-box"></div> -->
    <el-scrollbar
      :style="{
        backgroundColor: $store.state.themeCurrentMenuItem.ColorBg,
      }"
      class="menuHeighttAuto"
    >
      <el-menu
        :collapse-transition="true"
        class="el-menu-vertical-demo"
        :default-active="$store.state.menuActiveName"
        :background-color="$store.state.themeCurrentMenuItem.ColorBg"
        :collapse="isCollapse"
      >
        <SidebarItem
          v-for="(route, index) in sidebarRouters"
          :key="route.path + index"
          :item="route"
          :base-path="route.path"
        ></SidebarItem>
      </el-menu>
    </el-scrollbar>
  </div>
</template>

<script setup lang="ts">
import { h, resolveComponent, ref, reactive, computed } from "vue";
import { useRoute, useRouter } from "vue-router";
import { RouteList as routeMenuList } from "/@ts/router/routes/index";
import loginBox from "/@/layouts/components/logobox.vue";
import SidebarItem from "/@/layouts/components/Sidebar/SidebarItem.vue";
import { store } from "/@ts/store";
const router = useRouter();
const route = useRoute();
// const internalInstance = getCurrentInstance(); //获取当前实例
// const route = internalInstance?.appContext.config.globalProperties.$route;

const sidebarRouters = computed(() => {
  const state: any = store.state;
  console.log("state :>> ", state.permissionsModule.sidebarRouters);
  return state.permissionsModule.sidebarRouters;
});
/*
基本数据类型
引用数据类型（复杂类型） 个人建议 ref初始化变量 
ref 和 reactive 本质我们可以简单的理解为ref是对reactive的二次包装, 
ref定义的数据访问的时候要多一个.value
*/
const activeIndex = ref(0);

const state = reactive({
  data: { a: 1 },
});
const handleOpen = (key: string, keyPath: Array<string>) => {
  // console.log(key, keyPath);
};
const handleClose = (key: string, keyPath: Array<string>) => {
  // console.log(key, keyPath);
};
const handleSelect = (key: string, keyPath: Array<string>) => {
  // router.push({ name: key });
};

defineProps({
  isCollapse: {
    type: Boolean,
    required: true,
  },
});
</script>

<style lang="scss">
.menu-logo-hidden-box {
  height: 54px;
}

.llt-menu-box {
  position: relative;
  top: 0;
  left: 0;
}

.el-menu-vertical-demo {
  height: 100%;
  // height:calc(100% - 59px);
  overflow: auto;
  overflow-x: hidden;
  position: relative;
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
}
.el-menu {
  border: none;
}
.el-menu--collapse .el-sub-menu .el-sub-menu__title span {
  height: 0;
  width: 0;
  overflow: hidden;
  visibility: hidden;
  display: inline-block;
}
</style>
